<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/plugins/ganttCustom/ganttCustom.css}">
</head>
<body>
<div class="czBox febs-body layui-fluid layui-anim febs-anim"  lay-title="项目管理甘特图">
    <form class="layui-form-item layui-form">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 110px;">时间范围：</label>
            <div class="layui-input-block" id="dateRange" style="display: flex;">
                <input id="mfdSTime" type="text" autocomplete="off" class="layui-input" maxlength="25" placeholder="开始时间">
                <label class="layui-form-label" style="padding: 4px 3px;width: 11px;">-</label>
                <input id="mfdETime" type="text"  autocomplete="off" class="layui-input" maxlength="25" placeholder="结束时间">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: 20px;">
            <div id="query" class="layui-btn">
                <em class="layui-icon">&#xe615;</em> 查询
            </div>
        </div>
    </form>
    <!-- gantt图修改html -->
    <!-- 操作按钮 -->
    <!-- 操作按钮 -->
    <div class="handle_content_auth">
        <button type="button" class="layui-btn layui-btn-sm febs-hide" id="add_task"
                shiro:hasPermission="pmImportantTaskInfo:finalize">新建总任务</button>
        <button type="button" class="layui-btn layui-btn-sm febs-hide" id="lead_submit"
                shiro:hasPermission="pmImportantTaskInfo:submit">提交</button>
        <button type="button" class="layui-btn layui-btn-sm layui-bg-blue febs-hide" id="send_plan_fill"
                shiro:hasPermission="pmImportantTaskInfo:finalize">发起计划编制</button>
        <button type="button" class="layui-btn layui-btn-sm febs-hide" id="send_plan_draft"
                shiro:hasPermission="pmImportantTaskInfo:finalize">发送协议稿</button>
        <button type="button" class="layui-btn layui-btn-sm layui-bg-blue febs-hide" id="send_plan_finalize"
                shiro:hasPermission="pmImportantTaskInfo:finalize">定稿</button>
        <button type="button" class="layui-btn layui-btn-sm febs-hide" id="send_plan_sign"
                shiro:hasPermission="pmImportantTaskInfo:sign">签署</button>
        <button type="button" class="layui-btn layui-btn-sm layui-bg-blue febs-hide" id="send_plan_publish"
                shiro:hasPermission="pmImportantTaskInfo:finalize">发布</button>
        <button type="button" class="layui-btn layui-btn-sm febs-hide" id="send_plan_export"
        >导出</button>
        <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" id="send_plan_compilation"
        >专项办汇编</button>
        <button type="button" class="layui-btn layui-btn-sm febs-hide" id="send_plan_history"
        >历史版本</button>
    </div>
    <hr>
    <div class="layui-row">
        <div class="layui-col-md8 filter_content_btn">
            <div class="">
                <select class="taggleBtn taskSelect">
                    <option value="">请选择任务</option>
                </select>
            </div>
            <div class="">
                <select class="taggleBtn unitSelect">
                    <option value="">请选择牵头单位</option>
                </select>
            </div>
            <div class="">
                <select class="taggleBtn taggleBox">
                    <option value="day" selected>日</option>
                    <option value="month">月</option>
                    <option value="jidu">季度</option>
                    <option value="year">年</option>
                </select>
            </div>
        </div>
        <div class="layui-col-md4 handle_content_auth">
            <button type="button" class="layui-btn layui-bg-blue">项目组织架构</button>
            <button type="button" class="layui-btn layui-bg-blue">权限配置</button>
        </div>
    </div>

</div>
<!-- gantt图修改html -->
<div id="mainGanttBox" style="height: 720px;border:1px solid #eee;margin:20px auto 0;background: #fff;"></div>
<!-- 详情 -->
<div id="detailBox" style="display: none;padding:20px;">

</div>
<div id="menu">
    <div class="menu addProcess" >添加工序</div>
    <div class="menu editProcess" >编辑工序</div>
</div>
<div id="addBox" style="display: none;padding:20px;">
    <form class="layui-form-item layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 110px;">任务名称：</label>
            <div class="layui-input-inline">
                <input id="taskName" placeholder="请输入任务名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 110px;">区间：</label>
            <div class="layui-input-inline">
                <input type="radio" lay-filter="selectQJ" name="rob" value="0" title="时间范围" checked>
                <input type="radio" lay-filter="selectQJ" name="rob" value="1" title="日期">
            </div>
        </div>
        <div class="layui-form-item dateRange">
            <label class="layui-form-label" style="width: 110px;">时间范围：</label>
            <div class="layui-input-inline">
                <input id="startTime" type="text" autocomplete="off" class="layui-input" maxlength="25" placeholder="开始时间" >
            </div>
            <label class="layui-form-label" style="padding: 4px 3px;width: 11px;">-</label>
            <div class="layui-input-inline" style="margin-left: 6px;">
                <input id="endTime" type="text"  autocomplete="off" class="layui-input" maxlength="25" placeholder="结束时间">
            </div>
        </div>
        <div class="layui-form-item dateSelect" style="display: none;">
            <label class="layui-form-label" style="width: 110px;">日期：</label>
            <div class="layui-input-inline">
                <input id="curTime" type="text" autocomplete="off" class="layui-input" maxlength="25" placeholder="请选择日期" >
            </div>
        </div>
        <div class="layui-form-item iconSelect" style="display: none;">
            <label class="layui-form-label" style="width: 110px;">图标：</label>
            <div class="layui-input-inline">
                <select id="iconXZ">
                    <option>三角形</option>
                </select>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include::foot" />
<!--<script th:src="@{/layui/layui.js}"></script>-->
<script th:src="@{/plugins/ganttCustom/ganttCustom.js}"></script>
<script>
    layui.config({
        base: ctx + 'febs/'
    }).extend({
        commonJS:'lay/extends/common',
        febs: 'lay/modules/febs',
        validate: 'lay/modules/validate'
    }).use(['layer', 'form', 'laytpl','febs', 'table', 'laydate'], function() {
        var layer = layui.layer,
            form=layui.form,
            mfdSTime = "2023-04-02",
            mfdETime = "2024-07-24",
            laydate = layui.laydate,
            $view = $('#mainGanttBox')
        var showType='day',rightClickItem,ganttCustom
        var laydateSearch = laydate.render({
            elem: '#dateRange'
            ,range:['#mfdSTime','#mfdETime']
            ,rangeLinked:true
            ,value:'2023-04-02 - 2024-07-24'
            ,done: function(value, date, endDate){
                if(value){
                    let dateSelect = value.split('-')
                    mfdSTime = value.substring(0,10);
                    mfdETime = value.substring(13,25)
                }

            }
        })
        // 日周年切换
        $('.taggleBox').change(function(){ // gantt图修改js
            /* $(this).siblings('.taggleBtn').removeClass('active')
            $(this).addClass('active')
            if(($("#mfdSTime").val() =="" || $("#mfdSTime").val() ==undefined) && ($("#mfdETime").val() =="" || $("#mfdETime").val() ==undefined)){
                layer.msg("日期范围不能为空")
                return;
            }
            $('.taggleBtn').each(function(){
                if($(this).hasClass('active')){
                    showType=$(this).attr('type')
                }
            }) */
            if(ganttCustom){
                // tableDatas不传,就是数据没变
                ganttCustom.reload({
                    showType: $('.taggleBox').val(),
                    startTime:mfdSTime,
                    endTime:mfdETime,
                    tableData:tableDatas
                })
                initEvent()
            }
        })
        //查询
        $("#query").on('click', function () {
            mfdSTime = $("#mfdSTime").val()
            mfdETime = $("#mfdETime").val()
            if(ganttCustom){
                // tableDatas不传,就是数据没变
                ganttCustom.reload({
                    showType:showType,
                    startTime:mfdSTime,
                    endTime:mfdETime,
                    tableData:tableDatas
                })
                initEvent()
            }
        });
        /* taskList数组是进度条数据
            taskList:[{
                name:'规划阶段',//项目名称
                startTime:'2023-04-21',//项目开始时间
                endTime:'2023-07-28',//项目结束时间
                rate:'10',//项目的进度10即10%
                id: 56400023,//项目id
                taskColor:'#8600FD',//进度条背景色
                rateColor:'#8101CA',//进度条进度颜色
                isDrag:true,//是否可以拖动进度条
                isResize:true,//是否可以缩放进度条
                isIcon:true,//true就是显示图例，false显示进度条，
                iconUrl:'',//图例地址
            }]
            */
        var tableDatas = [{
            startTime:'2023-04-11',
            endTime:'2023-06-07',
            id: 133,
            level: 1,
            projectTitle: "NE399",
            taskList:[{
                name:'规划阶段',
                startTime:'2023-04-21',
                endTime:'2023-07-28',
                rate:'10',
                id: 56400023,
                taskColor:'#8600FD',
                rateColor:'#8101CA',
                isDrag:false,
                isResize:true
            }],
            children: [{
                startTime:'2023-04-11',
                endTime:'2023-04-20',
                id: 881174,
                level: 2,
                projectTitle: "RH*AP2P*S*AD",
                taskList:[{
                    startTime:'2023-05-11',
                    endTime:'2023-06-20',
                    rate:'10',
                    name:'规划阶段',
                    id: 88743399,
                    taskColor:'#3CB8D2',
                    rateColor:'#299CB4',
                    isDrag:true,
                    isResize:false
                }],
                children:[{
                    startTime:'2023-04-15',
                    endTime:'2023-04-19',
                    rate:'15',
                    id: 3902204,
                    level: 3,
                    projectTitle: "RH",
                    taskList:[{
                        startTime:'2023-05-15',
                        endTime:'2023-06-19',
                        name:'阶段一',
                        rate:'0',
                        id: 3900426788,
                        taskColor:'#FAA11B',
                        rateColor:'#E79E0D',
                        isDrag:true,
                        isResize:true
                    },{
                        startTime:'2023-05-11',
                        endTime:'2023-06-11',
                        isIcon:true,
                        isDrag:true,
                        isResize:true,
                        name:'阶段一',
                        id: 390692432976
                    }],
                },{
                    startTime:'2023-04-17',
                    endTime:'2023-05-01',
                    rate:'40',
                    id: 3884496,
                    level: 3,
                    projectTitle: "AP2P",
                    taskList:[{
                        startTime:'2023-04-17',
                        endTime:'2023-05-21',
                        rate:'40',
                        name:'阶段二',
                        id: 388964534,
                        isDrag:true,
                        isResize:true,
                        taskColor:'#3CB8D2',
                        rateColor:'#299CB4'
                    }],
                }]}]
        }, {
            startTime:'2023-04-23',
            endTime:'2023-05-20',
            id: 1203,
            level: 1,
            projectTitle: "NE423",
            taskList:[{
                name:'规划阶段',
                startTime:'2023-06-21',
                endTime:'2024-02-22',
                rate:'10',
                id: 56309988776,
                isDrag:true,
                isResize:true,
                taskColor:'#8600FD',
                rateColor:'#8101CA'
            }],
            children: [{
                startTime:'2023-04-26',
                endTime:'2023-05-20',
                rate:'50',
                id: 1983320,
                level: 2,
                projectTitle: "AP4P*S*AP2*3",
                taskList:[{
                    startTime:'2023-04-05',
                    endTime:'2023-12-18',
                    rate:'10',
                    name:'阶段三',
                    isDrag:true,
                    isResize:true,
                    id: 6563547687879,
                    taskColor:'#FAA11B',
                    rateColor:'#E79E0D'
                }],
                children:[{
                    startTime:'2023-04-23',
                    endTime:'2023-04-30',
                    rate:'60',
                    id: 7566225,
                    level: 3,
                    projectTitle: "AP4S",
                    taskList:[{
                        startTime:'2023-04-11',
                        endTime:'2023-05-18',
                        rate:'10',
                        name:'阶段三',
                        id: 887499099,
                        isDrag:true,
                        isResize:true,
                        taskColor:'#FAA11B',
                        rateColor:'#E79E0D'
                    }],
                },{
                    startTime:'2023-04-25',
                    endTime:'2023-05-20',
                    rate:'70',
                    id: 7566633,
                    level: 3,
                    projectTitle: "AP4P",
                    taskList:[{
                        name:'开发阶段',
                        startTime:'2024-03-21',
                        endTime:'2024-07-22',
                        rate:'10',
                        id: 9994444777,
                        isDrag:true,
                        isResize:true,
                        taskColor:'#3CB8D2',
                        rateColor:'#299CB4'
                    }],
                }]
            }]
        }, {
            startTime:'2023-06-22',
            endTime:'2023-07-25',
            rate:'60',
            projectTitle: "NE489",
            id: 1255,
            level: 1,
            taskList:[{
                name:'开发阶段',
                startTime:'2024-01-11',
                endTime:'2024-05-22',
                rate:'10',
                id: 9992222666777,
                isDrag:true,
                isResize:true,
                taskColor:'#EBE766',
                rateColor:'#CBC74D'
            }],
            children: [{
                startTime:'2023-06-22',
                endTime:'2023-06-30',
                rate:'45',
                id: 18559,
                level: 2,
                projectTitle: "AP4P*S*AP2*3",
                taskList:[{
                    name:'开发阶段',
                    startTime:'2024-02-11',
                    endTime:'2024-06-22',
                    rate:'10',
                    id: 97788332777,
                    isDrag:true,
                    isResize:true,
                    taskColor:'#3CB8D2',
                    rateColor:'#299CB4'
                }],
                children: [{
                    startTime:'2023-06-25',
                    endTime:'2023-06-30',
                    rate:'50',
                    id: 75669,
                    taskList:[{
                        name:'开发阶段',
                        startTime:'2023-04-11',
                        endTime:'2023-04-28',
                        rate:'10',
                        id: 9380283774,
                        isDrag:true,
                        isResize:true,
                        taskColor:'#8600FD',
                        rateColor:'#8101CA'
                    }],
                    level: 3,
                    projectTitle: "AP4P"
                }]
            }, {
                startTime:'2023-07-01',
                endTime:'2023-07-20',
                rate:'50',
                id: 18560,
                level: 2,
                projectTitle: "ASD1*ADP*S*ASD1C*ADC",
                taskList:[{
                    name:'开发阶段',
                    startTime:'2023-05-11',
                    endTime:'2024-01-22',
                    rate:'10',
                    id: 223399002777,
                    taskColor:'#3CB8D2',
                    rateColor:'#299CB4',
                    isDrag:true,
                    isResize:true,
                }],
                children: [{
                    startTime:'2023-07-03',
                    endTime:'2023-07-15',
                    rate:'70',
                    id: 75661,
                    level: 3,
                    projectTitle: "ASD1C",
                    taskList:[{
                        name:'开发阶段',
                        startTime:'2023-06-15',
                        endTime:'2024-02-22',
                        rate:'10',
                        isDrag:true,
                        isResize:true,
                        id: 998877663332777,
                        taskColor:'#EBE766',
                        rateColor:'#CBC74D'
                    }],
                }, {
                    startTime:'2023-07-05',
                    endTime:'2023-07-25',
                    rate:'50',
                    id: 75660,
                    level: 3,
                    projectTitle: "ASD1P",
                    taskList:[{
                        name:'开发阶段',
                        startTime:'2023-09-12',
                        endTime:'2024-04-22',
                        rate:'10',
                        isDrag:true,
                        isResize:true,
                        id: 990033772232777,
                        taskColor:'#3CB8D2',
                        rateColor:'#299CB4'
                    }],
                }]
            }]
        }]

        // startTime,endTime不传,右侧表格显示的最小日期和最大日期会取数据的中最小最大日期
        ganttCustom = new GanttCustom({
            elem: '#mainGanttBox',
            tableData:tableDatas,
            showType:showType,
            startTime:mfdSTime,//右侧表格显示的最小日期
            endTime:mfdETime,//右侧表格显示的最大日期
            dlclick(taskId){
                // 显示任务详情
                layer.open({
                    title:'详情',
                    type:1,
                    content:$('#detailBox'),
                    btn: [],
                    area: ['580px','400px'],
                    yes: function (index, layero) {

                    }
                })
            }
        })
        initEvent()
        // 点击页面任何地方隐藏右键菜单
        $(document).on('click', function (e) {
            $("#menu").hide();
        })
        // 添加工序-区间选择
        form.on('radio(selectQJ)',function(data){
            if(data.value == 0){
                $('.dateRange').show()
                $('.dateSelect').hide()
                $('.iconSelect').hide()
            }else{
                // 选择日期 ,显示图标
                $('.dateRange').hide()
                $('.dateSelect').show()
                $('.iconSelect').show()
            }

        })
        function initEvent(){
            // 左侧任务右侧菜单
            $view.find('.leftTableTop').on("contextmenu", function (e) {
                //取消默认的浏览器自带右键 很重要！！
                e.preventDefault();
                // 获取点击的层级
                let level = $(e.target).parents('.node-title').attr('level')
                //获取我们自定义的右键菜单
                var menu = document.querySelector("#menu");
                //根据事件对象中鼠标点击的位置，进行定位
                let menuHeight =$('#menu').css('height')
                if(($(window).height() - e.clientY) < menuHeight ){
                    var chaju = $(window).height() - e.clientY;

                    menu.style.left = e.clientX + 'px';
                    menu.style.top = e.clientY -chaju + 'px';
                }else{
                    menu.style.left = e.clientX + 'px';
                    menu.style.top = e.clientY + 'px';
                }
                $("#menu").show();
            })
            // 右侧显示右键菜单，获取点击处日期
            $view.find('#dataList').on("contextmenu",'.taskline',function (e) {
                // 点击空白处-新增-取点击处日期/点击的进度条信息
                rightClickItem = ganttCustom.showMenu(e)
                let className = e.target.className
                // 点击任务条就显示编辑工序，空白处显示新增
                if(className.indexOf('taskDiv') !=-1 || className.indexOf('rateDiv') !=-1 || className.indexOf('task_progress_drag') !=-1 || className.indexOf('oneNodeImg') !=-1){
                    // 点击的是进度条
                    $('.editProcess').show()
                    $('.addProcess').hide()
                    $('.delProcess').show()

                }else if($(e.target).attr('class').indexOf('imgNode') !=-1){
                    // 点击的是图例
                    $('.editProcess').show()
                    $('.addProcess').hide()
                    $('.delProcess').show()
                }else{
                    // 点击的空白处
                    $('.editProcess').hide()
                    $('.addProcess').show()
                    $('.delProcess').hide()
                }

                //取消默认的浏览器自带右键 很重要！！
                e.preventDefault();
                //获取我们自定义的右键菜单
                var menu = document.querySelector("#menu");
                //根据事件对象中鼠标点击的位置，进行定位
                let menuHeight =$('#menu').css('height')
                if(($(window).height() - e.clientY) < menuHeight ){
                    var chaju = $(window).height() - e.clientY;

                    menu.style.left = e.clientX + 'px';
                    menu.style.top = e.clientY -chaju + 'px';
                }else{
                    menu.style.left = e.clientX + 'px';
                    menu.style.top = e.clientY + 'px';
                }
                $("#menu").show();
            })

        }
        // 编辑工序
        $("#menu").on('click', '.editProcess', function (e) {
            showAddOrEdit(1)
        })
        // 添加工序
        $("#menu").on('click', '.addProcess', function (e) {
            showAddOrEdit(2)
        })
        function showAddOrEdit(type){
            let title = type ==1 ? '编辑工序' : '新增工序'
            layer.open({
                title:title,
                type:1,
                content:$('#addBox'),
                btn: ['确定','取消'],
                area: ['580px','400px'],
                yes: function (index, layero) {
                    // 计算每个任务条的left和宽度
                    let days,divLeft,iconType
                    let obj={}
                    let taskName = $('#taskName').val()
                    let isShowIcon = $("input:radio[name='rob']:checked").val() == '1' ? true : false

                    selectedIcon = $("#iconXZ").find("option:selected").text()
                    let iconUrl = './img/daysanjiao.png'
                    if(selectedIcon == '三角形'){
                        iconUrl = './img/daysanjiao.png'
                    }
                    let sTime=$("#startTime").val()
                    let eTime=$("#endTime").val()
                    let curTime = $("#curTime").val()

                    rightClickItem.isIcon = isShowIcon
                    rightClickItem.name = taskName

                    if(isShowIcon){
                        rightClickItem.startTime = curTime
                        rightClickItem.endTime = curTime
                        rightClickItem.iconUrl = iconUrl
                    }else{
                        rightClickItem.startTime = sTime
                        rightClickItem.endTime = eTime
                    }

                    // 修改或者新增右侧进度条信息
                    if(type == 1){
                        // 编辑
                        ganttCustom.update(rightClickItem)
                    }else{
                        // 新增
                        // selfId需要请求接口后返回
                        // todo:请求接口返回新增任务id
                        let selfId = Math.ceil(Math.random()*100000)
                        rightClickItem.id = selfId
                        ganttCustom.add(rightClickItem)
                    }

                    // 清空输入框值
                    $('#taskName').val('')
                    $('input[name=rob]').each(function(index,item){
                        if(item.value=="0"){
                            $(item).prop('checked',true)
                        }
                    })
                    form.render()
                    layer.closeAll()
                },
                btn2:function (index, layero) {

                },
            })

            if(type ==1){//编辑回显
                $('#taskName').val(rightClickItem.name)
                if(rightClickItem.isIcon){//显示图例
                    $('input[name=rob]').each(function(index,item){
                        if(item.value=="1"){
                            $(item).prop('checked',true)
                        }else if(item.value=="0"){
                            $(item).removeAttr('checked')
                        }
                    })
                    $('.dateRange').hide()
                    $('.dateSelect').show()
                    $('.iconSelect').show()
                    $("input:radio[value='0']").attr("disabled",true).prop("disabled",true);
                    $("input:radio[value='1']").attr("disabled",false).prop("disabled",false);
                }else{
                    $('input[name=rob]').each(function(index,item){
                        if(item.value=="0"){
                            $(item).prop('checked',true)
                        }else if(item.value=="1"){
                            $(item).removeAttr('checked')
                        }
                    })
                    $('.dateRange').show()
                    $('.dateSelect').hide()
                    $('.iconSelect').hide()
                    $("input:radio[value='0']").attr("disabled",false).prop("disabled",false);
                    $("input:radio[value='1']").attr("disabled",true).prop("disabled",true);
                }
            }else{
                $('input[name=rob]').each(function(index,item){
                    if(item.value=="0"){
                        $(item).prop('checked',true)
                    }else if(item.value=="1"){
                        $(item).removeAttr('checked')
                        $("input:radio[value='0']").attr("disabled",false).prop("disabled",false);
                        $("input:radio[value='1']").attr("disabled",false).prop("disabled",false);
                    }
                    $('.dateRange').show()
                    $('.dateSelect').hide()
                    $('.iconSelect').hide()
                })
            }
            form.render()
            // 初始化/回显日期
            let dateObj = ganttCustom.getTableMinAndMaxDate()
            // 开始时间
            laydate.render({
                elem: '#startTime'
                ,value:rightClickItem.startTime
                ,min:dateObj.tableMinDate
                ,max:dateObj.tableMaxDate
                ,done: function(value, date, endDate){

                }
            })
            // 结束时间
            laydate.render({
                elem: '#endTime'
                ,value:rightClickItem.endTime
                ,min:dateObj.tableMinDate
                ,max:dateObj.tableMaxDate
                ,done: function(value, date, endDate){

                }
            })
            laydate.render({
                elem: '#curTime'
                ,value:rightClickItem.startTime//默认是点击位置日期
                ,min:dateObj.tableMinDate
                ,max:dateObj.tableMaxDate
                ,done: function(value, date, endDate){

                }
            })
        }

    })
</script>
</body>
</html>
